<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="balance">
        <p>账户余额</p>
        <div class="money">
          <span>￥{{ supplier.balance }}</span>
          <a-button type="primary" @click="showWithdraw = true">提现</a-button>
        </div>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between"></div>
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
      >
        <!-- <span slot="name" slot-scope="scope">
          {{ scope.info.info_name }}
        </span>
        <span slot="mobile" slot-scope="scope">
          {{ scope.info.tel }}
        </span>
        <span slot="type" slot-scope="text">
          {{ text == 0 ? '个人' : text == 1 ? '企业' : '个体工商户' }}
        </span> -->
        <span slot="before_price" slot-scope="text"> ￥{{ text || 0 }} </span>
        <span slot="after_price" slot-scope="text"> ￥{{ text || 0 }} </span>
        <span slot="addtime" slot-scope="text">
          {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>
      </a-table>
    </a-card>
    <!-- 提现申请弹窗 -->
    <a-modal
      title="申请提现"
      v-model="showWithdraw"
      :afterClose="closeModal"
      @ok="submitApply"
      :destroyOnClose="true"
      width="800px"
    >
      <a-form-model
        ref="ruleForm"
        :model="withdrawForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="转账方式">
          <a-radio-group v-model="withdrawForm.cash_type">
            <a-radio value="1"> 微信线下转账 </a-radio>
            <a-radio value="2"> 支付宝转账 </a-radio>
            <a-radio value="3"> 银行卡转账 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          :label="withdrawForm.cash_type == 1 ? '微信号' : withdrawForm.cash_type == 2 ? '支付宝账号' : '银行卡号'"
          prop="account"
        >
          <a-input v-model="withdrawForm.account" />
        </a-form-model-item>
        <a-form-model-item label="银行卡开户行" prop="bank_name" v-if="withdrawForm.cash_type == 3">
          <a-input v-model="withdrawForm.bank_name" />
        </a-form-model-item>
        <a-form-model-item
          :label="withdrawForm.cash_type == 1 ? '微信昵称' : withdrawForm.cash_type == 2 ? '支付宝昵称' : '姓名'"
          prop="name"
        >
          <a-input v-model="withdrawForm.name" />
        </a-form-model-item>
        <a-form-model-item label="提现金额" prop="price">
          <a-input v-model="withdrawForm.price" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { banlanceRecord, creatWithdrawAupply } from '@/api/purchase/supplier'
import tabList from '@/views/saas/components/tabList.vue'
import { cyyUploadImg } from '@/components/CyyUi'
const columns = [
  // {
  //   title: '用户昵称',
  //   scopedSlots: {
  //     customRender: 'name',
  //   },
  // },
  // {
  //   title: '电话',
  //   scopedSlots: {
  //     customRender: 'mobile',
  //   },
  // },
  // {
  //   title: '商户类型',
  //   dataIndex: 'type',
  //   scopedSlots: {
  //     customRender: 'type',
  //   },
  // },
  {
    title: '添加时间',
    dataIndex: 'addtime',
    sorter: (a, b) => a.addtime - b.addtime,
    scopedSlots: {
      customRender: 'addtime',
    },
  },
  {
    title: '变动金额',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '变动前余额',
    dataIndex: 'before_price',
    scopedSlots: {
      customRender: 'before_price',
    },
    sorter: (a, b) => a.before_price - b.before_price,
  },
  {
    title: '变动后余额',
    dataIndex: 'after_price',
    scopedSlots: {
      customRender: 'after_price',
    },
    sorter: (a, b) => a.after_price - b.after_price,
  },
  {
    title: '详情',
    dataIndex: 'desc',
  },
]

export default {
  components: {
    tabList,
    cyyUploadImg,
  },
  data() {
    let checkAccount = (rule, value, callback) => {
      console.log(rule, value)
      if (!value) {
        if (rule.field == 'account') {
          if (this.withdrawForm.cash_type == 1) {
            callback(new Error('请输入微信号'))
          }
          if (this.withdrawForm.cash_type == 2) {
            callback(new Error('请输入支付宝账号'))
          }
          if (this.withdrawForm.cash_type == 3) {
            callback(new Error('请输入银行卡卡号'))
          }
        }
        if (rule.field == 'name') {
          if (this.withdrawForm.cash_type == 1) {
            callback(new Error('请输入微信昵称'))
          }
          if (this.withdrawForm.cash_type == 2) {
            callback(new Error('请输入支付宝昵称'))
          }
          if (this.withdrawForm.cash_type == 3) {
            callback(new Error('请输入姓名'))
          }
        }
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          key: 'saasSupplierPurchaseBalance',
          name: '余额变动记录',
        },
        {
          key: 'saasSupplierPurchaseBalanceDisabled',
          name: '冻结余额记录',
        },
        // {
        //   key: 'saasSupplierPurchaseWithdraw',
        //   name: '提现记录',
        // },
      ],
      // 搜索参数
      queryParam: {
        page: 1,
        limit: 10,
      },
      selectedRowKeys: [],
      columns,
      list: [],
      supplier: {
        balance: '0.00',
      },
      totalCount: 0,
      // 提现表单
      withdrawForm: {
        price: '',
        type: '2',
        cash_type: '1',
        account: '',
        name: '',
        bank_name: '',
      },
      rules: {
        price: [{ required: true, message: '请输入提现金额', trigger: 'blur' }],
        account: [{ required: true, validator: checkAccount, trigger: 'blur' }],
        name: [{ required: true, validator: checkAccount, trigger: 'blur' }],
        bank_name: [{ required: true, message: '请输入银行卡开户行', trigger: 'blur' }],
      },
      // 是否显示申请提现的弹窗
      showWithdraw: false,
      btnLoading: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 关闭弹窗的回调
    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },
    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },
    // 获取数据
    async getList() {
      const res = await banlanceRecord(this.queryParam)
      if (res.code == 0) {
        this.list = res.data.list
        this.supplier = res.data.supplier
        this.totalCount = res.data.count
      }
    },
    // 创建提现申请
    submitApply() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          const res = await creatWithdrawAupply(this.withdrawForm)
          if (res.code == 0) {
            this.showWithdraw = false
            this.getList()
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}
.tip {
  line-height: normal;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
.balance {
  padding-top: 24px;
  p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
  }
  .money {
    display: flex;
    align-items: center;
    span {
      font-size: 30px;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 16px;
    }
  }
}
</style>
